<template>
	<uni-search-bar @confirm="searchCityBus" placeholder="请输入搜索的公交站点" v-model="searchKey"></uni-search-bar>

	<div class="lunbo">
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in lunboList">
				<view class="swiper-item">
					<image :src="item.url" mode="" style="width: 100%;"></image>
				</view>
			</swiper-item>
		</swiper>
	</div>
	<!-- 天气信息展示 -->
	<view class="weather" style="">
		<view class="icon" style="width: 100rpx;height: 100rpx; ">
			<image style="width: 100%;height: 100%;" :src="'/static/weather/icons/' + weatherNow.icon + '.svg'" mode="">
			</image> <!-- 渲染天气图标 -->
		</view>
		<view class="text" style="font-size: 50rpx;margin-left: 10px;">
			{{ weatherNow.temp }}°C <!-- 显示当前温度 -->
		</view>
		<view class="text" style="font-size: 34rpx;margin-left: 10rpx;">
			{{ weatherNow.text }} <!-- 显示天气描述 -->
		</view>
		<view class="text" style=" margin-left: 10rpx;">
			{{ weatherNow.windDir }} {{ weatherNow.windScale }}级 <!-- 显示风向和风速 -->
		</view>
		<view>
			<view class="text" style="margin-left: 10rpx;">
				体感温度： {{ weatherNow.feelsLike }}°C <!-- 显示体感温度 -->
			</view>
			<view class="text" style="margin-left: 10rpx;">
				湿度： {{ weatherNow.humidity }}% <!-- 显示湿度 -->
			</view>
		</view>
	</view>
	<!-- 网格布局组件，用于展示分类图标和标题 -->
			<div style="display: flex;justify-content: center;">
				<uni-grid :show-border="false" :column="4" @change="changeGrid">
					<uni-grid-item v-for="(item,index) in gridData" :index="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons class="icon" :type="item.icon" :size="30" color="#fe0067" /><br>
							<span class="text">{{item.title}}</span>
						</view>
					</uni-grid-item>
				</uni-grid>
			</div>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from "../../utils/config"
	
	
	onLoad(() => {
		getLunbo()
		getWeather()
		// getCurrentPos()
	})
	let weatherNow = ref({})
	const searchkry = ref("")
	const lunboList = ref([])
	console.log(CONFIG.leanbase_url + "/1.1/classes/Longbo")
	async function getLunbo() {
		let res = await uni.$get(CONFIG.leanbase_url + "/1.1/classes/Longbo")
		console.log(res)
		lunboList.value = res.results
		console.log(lunboList.value)
	}

	let searchKey = ref('')

	function searchCityBus() {
		if (searchKey.value === '') {
			uni.showToast({
				title: '请输入关键字',
				icon: 'none'
			})
			return
		} else {
			window.location.href =
				`https://uri.amap.com/line?name=${searchKey.value}&city=0951&callnative=1`
		}
	}
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_now, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_locition
		}) // 发送 GET 请求
		if (res.code == 200) {
			weatherNow.value = res.now // 将结果赋值给 weatherNow
			console.log(res.now)
		}
	}
	let newList = ref([{
			img: "../../static/yw/辣糊糊.jpeg"
		}, {
			img: "../../static/images/f2.webp"
		}])
	
		// 定义网格数据
		let gridData = [{
				title: '天气预报',
				icon: 'paperplane'
			},
			{
				title: '热映电影',
				icon: 'videocam'
			},
			{
				title: '公交地铁',
				icon: 'map'
			},
			{
				title: '我的小组',
				icon: 'star-filled'
			},
		]
		// 点击网格项时触发的方法
			function changeGrid(e) {
				//点击的序号
				let index = e.detail.index
				// 根据不同的需要进行相应的跳转
				console.log(index)
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '/pages/weather7d/weather7d'
						})
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/movie/movie'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/trafficMap/trafficMap'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/details/details'
						})
						break;
				}
			}
</script>

<style lang="scss" scoped>
	// 整体页面内容区域样式，设置一些通用的布局和外观属性
	.content {
		padding: 10rpx;
		box-sizing: border-box;
	}

	// 搜索栏样式
	uni-search-bar {
		margin-bottom: 10rpx;
		border: 1px solid #ccc;
		border-radius: 5rpx;
	}

	// 轮播图外层容器样式
	.lunbo {
		width: 100%;
		margin-bottom: 10rpx;
		border-radius: 5rpx;
		overflow: hidden;
	}

	// 轮播图每个单项的样式
	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 天气信息整体区域样式
	.weather {
		height: 150rpx;
		border: 1px solid #ccc;
		margin: 5rpx;
		border-radius: 5rpx;
		display: flex;
		justify-content: space-between;
		padding: 10rpx;
		align-items: center;
		color: #ff5500;
	}

	// 天气图标容器样式
	.weather.icon {
		width: 100rpx;
		height: 100rpx;
	}

	// 天气信息中文字的通用样式
	.weather.text {
		font-family: Arial, sans-serif;
	}

	// 天气温度文字样式，可单独设置字体大小等，使其更突出
	.weather.text:nth-child(2) {
		font-size: 50rpx;
	}

	// 天气描述文字样式
	.weather.text:nth-child(3) {
		font-size: 34rpx;
	}
</style>